<template>
  <div style="margin-top: 50px;margin-bottom: 100px;height: 600px;display:flex;">
    <div style="width: 350px;height: 350px;
    margin-bottom: auto;margin-top: auto;margin-left: 10%">

      <img v-if="!updateIf" style="width: 350px;height: 350px" :src="myData.photo">

      <el-upload
          v-else
          ref="uploadRef"
          class="avatar-uploader"
          :headers="headerObj"
          accept="jpg/png"
          name="avatar"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="upLoadChange"
      >
        <img style="width: 350px;height: 350px" v-if="myData.photo"
             :src="myData.photo" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
      </el-upload>

    </div>
    <div style="height: 60%;margin-left: 3%;margin-top: auto;margin-bottom: auto;">
      <div>
        <div style="display: flex">
          <div v-show="!updateIf" style="font-size: 35px">{{ myData.username }}</div>
          <el-button @click="updateIfChange" style="height: 40px; width: 100px;" :class="!updateIf === true ? 'butCssY' :'butCssN'"
                     type="danger" round>
            {{ butName }}
          </el-button>
        </div>
        <div v-show="updateIf" style="font-size: 20px;color: black">用户名:</div>
        <el-input v-show="updateIf" v-model="myData.username" style="min-width: 20%;width: max-content;
        height: 50px;font-size: 26px" placeholder="用户名" />
        <div v-show="updateIf" style="font-size: 20px;color: black">密码:</div>
        <el-input
            style="min-width: 20%;width: max-content;
            height: 36px;font-size: 26px"
            v-show="updateIf"
            v-model="myData.password"
            type="password"
            placeholder="密码"
            show-password
        />
      </div>
      <div style="margin-top: 50px;display: flex">
        <div style="display: flex">
          <img src="src/assets/img/svg/phone.svg" style="width: 60px;height: 60px;object-fit:cover ">
          <div style="margin-left: 10px">
            <div v-show="!updateIf" style="font-size: 15px">电话号码</div>
            <el-input v-show="updateIf" v-model="myData.phone" style="min-width: 20%;width: max-content;
        height: 50px;font-size: 26px" placeholder="电话号码" />
            <div v-show="!updateIf" style="font-size: 26px;margin-top: 8px;font-weight: bold">{{ myData.phone }}</div>
          </div>
        </div>
        <div style="display: flex;margin-left: 80px">
          <img src="src/assets/img/svg/email.svg" style="width: 60px;height: 60px;object-fit:cover ">
          <div style="margin-left: 10px">
            <div v-show="!updateIf" style="font-size: 15px">电子邮箱</div>
            <el-input v-show="updateIf" v-model="myData.email" style="min-width: 20%;width: max-content;
        height: 50px;font-size: 26px" placeholder="邮箱" />
            <div v-show="!updateIf" style="font-size: 26px;margin-top: 8px;font-weight: bold">{{ myData.email }}</div>
          </div>
        </div>
      </div>
      <div>

      </div>
    </div>
  </div>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
import {onMounted, reactive, ref} from "vue";
import pic from "/src/assets/img/gallery/ad.jpg"
import {ElMessage, ElMessageBox} from "element-plus";
import axios from "../../axios/index.js";
import store from "../../store/index.js";
import {useRouter} from "vue-router";
const router = useRouter();


let file_temp=[]
const upLoadChange =  (file)=>{
  //console.log(file)
  myData.photo = URL.createObjectURL(file.raw)
  // 复刻文件信息
  file_temp = file.raw;
}

let updateIf = ref(false)


let butName = ref("更新信息")
const updateIfChange = ()=>{
  if (!updateIf.value){
    butName.value = '确认更新?'
    myDataCopy.username = myData.username;
    myDataCopy.password = myData.password;
    myDataCopy.photo = myData.photo;
    myDataCopy.phone = myData.phone;
    myDataCopy.email = myData.email;
    updateIf.value = !updateIf.value;
  }else{
    ElMessageBox.confirm(
        '确认更新信息吗?',
        '更新',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
        }
    ).then(() => {
      updateIf.value = !updateIf.value;
      butName.value = '更新信息'
      if (file_temp.length !== 0) {
        //let formData = new FormData()
        //formData.append('avatar', file_temp)
        let requestConfig = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        axios.post("/user/avatar/upload",{
          avatar: file_temp
        },requestConfig).then(res => {
          myData.photo = ""
          myData.photo = res.data.data;
          submitData()
        }).catch(error => {
          ElMessage.error(error)
        })
      }else{
        submitData()
      }
    }).catch(() => {
      updateIf.value = !updateIf.value;
      butName.value = '更新信息'
      myData.username = myDataCopy.username;
      myData.password = myDataCopy.password;
      myData.photo = myDataCopy.photo;
      myData.phone = myDataCopy.phone;
      myData.email = myDataCopy.email;
      ElMessage({
        type: 'info',
        message: '暂未更新',
      })
    })
  }
}

const submitData = ()=>{
  axios.post("/user/update", myData).then(()=>{
    ElMessage({
      type: 'success',
      message: '更新成功',
    })
  }).catch(error => {
    ElMessage.error(error)
  })
}

let myDataCopy = {}

let myData = reactive({
  username: "鲁滨逊",
  password: "123456",
  photo: "",
  phone: "123456789",
  email: "123@qq.com"
})

const getUserInfo = ()=>{
  axios.get("/user/detail").then((res)=>{
    myData.username = res.data.data.username;
    myData.password = res.data.data.password;
    myData.photo = res.data.data.photo;
    myData.phone = res.data.data.phone;
    myData.email = res.data.data.email;
  }).catch(error => {
    ElMessage.info("请你先登录")
    router.push("/login")
  })
}
getUserInfo();

</script>

<style scoped>
.butCssY{
  margin-left: 50px;
  margin-top: auto;
  margin-bottom: auto
}
.butCssN{
  margin-bottom: 10px;
}
</style>
